<div class="findtrs">
	<form action="" method="post">
		<div class="ftitle">
			<div class="lt">
				<h2>数据报表</h2>
			</div>
			<div class="fdownload">
				<select name="" class="lsele">
					<option value="">近30天</option>
					<option value="近50天">近50天</option>
					<option value="近90天">近90天</option>
				</select>
				<a href="#" class="dwld"><i>下载</i></a>
			</div>
		</div>
		<div class="freportform">
			<div class="list">
				<ul>
					<li style="background: url(__STATIC__/lib/index/images/fimg9.png) no-repeat center/cover;">
						<dl>
							<dd>
								<h6>当日开卡数</h6>
								<h2><i>0</i>张</h2>
							</dd>
							<dd>
								<h6>当日删卡数</h6>
								<h2><i>0</i>张</h2>
							</dd>
						</dl>
					</li>
					<li style="background: url(__STATIC__/lib/index/images/fimg10.png) no-repeat center/cover;">
						<dl>
							<dd>
								<h6>当日pending金额</h6>
								<h2><i>0</i>$</h2>
							</dd>
							<dd>
								<h6>当日completed金额</h6>
								<h2><i>0</i>$</h2>
							</dd>
						</dl>
					</li>
					<li style="background: url(__STATIC__/lib/index/images/fimg11.png) no-repeat center/cover;">
						<dl>
							<dd>
								<h6>当日拒付金额</h6>
								<h2><i>0</i>$</h2>
							</dd>
							<dd>
								<h6>当日退款金额</h6>
								<h2><i>0</i>$</h2>
							</dd>
						</dl>
					</li>
					<li style="background: url(__STATIC__/lib/index/images/fimg9.png) no-repeat center/cover;">
						<dl>
							<dd>
								<h6>总开卡数</h6>
								<h2><i>0</i>张</h2>
							</dd>
							<dd>
								<h6>总删卡数</h6>
								<h2><i>0</i>张</h2>
							</dd>
						</dl>
					</li>
					<li style="background: url(__STATIC__/lib/index/images/fimg10.png) no-repeat center/cover;">
						<dl>
							<dd>
								<h6>累计pending金额</h6>
								<h2><i>0</i>$</h2>
							</dd>
							<dd>
								<h6>累计日completed金额</h6>
								<h2><i>0</i>$</h2>
							</dd>
						</dl>
					</li>
					<li style="background: url(__STATIC__/lib/index/images/fimg11.png) no-repeat center/cover;">
						<dl>
							<dd>
								<h6>累计拒付金额</h6>
								<h2><i>0</i>$</h2>
							</dd>
							<dd>
								<h6>累计退款金额</h6>
								<h2><i>0</i>$</h2>
							</dd>
						</dl>
					</li>
				</ul>
			</div>
			<div class="freport">
				<ul>
					<li>
						<div class="fport">
							<h2>开卡数量</h2>
							<h4>开卡数量</h4>
						</div>
						<div id="item1" class="imgs" style="height: 220px">
						</div>
					</li>
					<li>
						<div class="fport">
							<h2>商户消费金额</h2>
							<h4>消费金额</h4>
						</div>
						<div id="item2" class="imgs" style="height: 220px">
						</div>
					</li>
					<li>
						<div class="fport">
							<h2>退款金额</h2>
							<h4>退款金额</h4>
						</div>
						<div id="item3" class="imgs" style="height: 220px">
						</div>
					</li>
					<li>
						<div class="fport">
							<h2>账户充值金额</h2>
							<h4>充值金额</h4>
						</div>
						<div id="item4" class="imgs" style="height: 220px">
						</div>
					</li>
				</ul>
			</div>
		</div>

	</form>

</div>
<script src="__STATIC__/lib/index/js/echarts.min.js"></script>
<script type="text/javascript">

	var chartDom = document.getElementById('item1');
	var myChart = echarts.init(chartDom);
	var option;

	option = {
		grid: {
			left: '2%',
			right: '3%',
			bottom: '2%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: ['2022-07-18', '2022-07-23', '2022-07-28', '2022-08-02', '2022-08-07', '2022-08-12', '2022-08-12']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				data: [0, 1, 3, 5, 10, 20],
				type: 'line',
				smooth: true,
				color:'#e06df9'
			}
		]
	};

	option && myChart.setOption(option);

	var chartDom = document.getElementById('item2');
	var myChart1 = echarts.init(chartDom);
	var option1;

	option1 = {
		grid: {
			left: '2%',
			right: '3%',
			bottom: '2%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: ['2022-07-18', '2022-07-23', '2022-07-28', '2022-08-02', '2022-08-07', '2022-08-12', '2022-08-12']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				data: [0, 1, 3, 5, 10, 20],
				type: 'line',
				smooth: true,
				color:'#1ccd00'
			}
		]
	};

	option1 && myChart1.setOption(option1);

	var chartDom = document.getElementById('item3');
	var myChart2 = echarts.init(chartDom);
	var option2;

	option2 = {
		grid: {
			left: '2%',
			right: '3%',
			bottom: '2%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: ['2022-07-18', '2022-07-23', '2022-07-28', '2022-08-02', '2022-08-07', '2022-08-12', '2022-08-12']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				data: [0, 1, 3, 5, 10, 20],
				type: 'line',
				smooth: true,
				color:'#f66d6e'
			}
		]
	};

	option2 && myChart2.setOption(option2);


	var chartDom = document.getElementById('item4');
	var myChart3 = echarts.init(chartDom);
	var option3;

	option3 = {
		grid: {
			left: '2%',
			right: '3%',
			bottom: '2%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: ['2022-07-18', '2022-07-23', '2022-07-28', '2022-08-02', '2022-08-07', '2022-08-12', '2022-08-12']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				data: [0, 1, 3, 5, 10, 20],
				type: 'line',
				smooth: true,
				color:'#698cf7'
			}
		]
	};

	option3 && myChart3.setOption(option3);



</script>